<template>
  <Main>
    <div class="depart-tree">
      <el-tree :data="LeftTableData" style="height: 100%"  :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    </div>
    <div class="right">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="formInline.usrName" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label="真实姓名">
        <el-input v-model="formInline.realName" placeholder="真实姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="fetch()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="add()" size="small" icon="el-icon-plus">新建用户</el-button>
    <el-table
      :data="tableData"
      :empty-text="emptyText"
      style="width: 100%"
      row-key="kid"
      default-expand-all
      @sort-change="sortChange"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column fixed prop="USR_NAME" label="登录名" :default-sort = "{prop: 'USR_NAME', order: 'descending'}" sortable="custom" ></el-table-column>
      <el-table-column prop="REAL_NAME" label="真实姓名" sortable="custom" ></el-table-column>
      <el-table-column prop="CERT_NO" label="身份证号"></el-table-column>
      <el-table-column prop="MOBILE" label="电话号码"></el-table-column>
      <el-table-column prop="EMAIL" label="电子邮件"></el-table-column>
      <!-- <el-table-column prop="roles" label="用户角色"></el-table-column>
      <el-table-column prop="depts" label="所属部门"></el-table-column>-->
      <el-table-column prop="TYPE" label="用户类型" :formatter="typeFormat"></el-table-column>
      <el-table-column prop="STATUS" label="状态">
        <template slot-scope="scope">
          <el-switch 
            :value="scope.row.STATUS==0"
            active-color="#13ce66"
            inactive-color="#C0CCDA"
            @click.native="changeStatus(scope)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="300px">
        <template slot-scope="scope">
          <el-button type="primary" size="small"  @click="edit(scope.row.OBJECT_ID)">
            编辑人员
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page
      :page="formInline.current"
      :limit="formInline.size"
      :total="formInline.total"
      @change="changePage"
    ></page>
    <!-- </div> -->
    <Add ref="Add" @refresh="fetch"></Add>
    <Edit ref="Edit" @refresh="fetch"></Edit>
    </div>
  </Main>
</template>

<script>
import Main from "@/components/basic-container/main";
import page from "@/components/basic-page/page";
import DepartTree from "@/components/auth/departTree";
import { baseUrl } from "@/config/env";
import Add from "./add";
import Edit from "./edit";

const urls = {
  delete: baseUrl + "/cp/usr/au-usr/delete",
  list: baseUrl + "/cp/dept/au-dept/deptuserlist",
  role_list: baseUrl + "/cp/usr/au-usr-role/list",
  dept_list: baseUrl + "/cp/usr/au-usr-dept/list",
  resetPwd: baseUrl + "/cp/resetUserPwd",
  tree_list:baseUrl +  "/cp/dept/au-dept/tree",
  stop: baseUrl + "/cp/usr/au-usr/change_status",
};  
export default {
  methods: {
    typeFormat(row, column) {
      if (row.type == 0) {
        return "超级管理员";
      }
      return "一般用户";
    },
    statusFormat(row, column) {
      if (row.STATUS == 0) {
        return "正常";
      }
      return "停用";
    },
    sortChange(column, prop, order) {
      var order = {
        asc: column.order == "ascending",
        column: column.prop
      };
      var orders = [];
      orders.push(order);
      this.formInline.orders = orders;
      this.fetch();
    },
    changePage(val) {
      this.formInline.current = val;
      this.fetch();
    },
    add: function() {
      this.$refs.Add.show();
    },
    edit: function(objectId) {
      this.$refs.Edit.show(objectId);
    },
    resetPwd: function(objectId) {
      this.$confirm("确认要重置该用户密码吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        axios.get(urls.resetPwd,  { params: { objectId: objectId } }).then(res => {
            this.$message(res.data.result);
        });
      });
    },
    del: function(objectId) {
      this.$confirm("确认要删除该用户吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        axios.get(urls.delete, { params: { objectId: objectId } }).then(res => {
          this.$message(res.data.result);
          this.fetch();
        });
      });
    },
    changeStatus(sc) {
      var params = {};
      params.objectId = sc.row.OBJECT_ID;
      var msg = "";
      if(sc.row.STATUS == 0) {
        params.status=1;
        msg = "停用";
      }else{
        msg = "启用"
        params.status=0;
      }
      this.$confirm("确认要"+msg+"该用户账号吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        axios.get(urls.stop, { params: params }).then(res => {
          this.$message(res.data.result);
          this.RightFetch();
        });
      });
      //选择是否为菜单
      
      
    },
    fetch() {
      axios.get(urls.tree_list).then(res => {
        const data = res.data.result;
        this.LeftTableData = data;
      });
      axios.post(urls.list, this.formInline).then(res => {
        console.log(res)
        const data = res.data.result;
        this.tableData = data.records;
        this.emptyText = "暂无数据"
        this.formInline.current = data.current;
        this.formInline.size = data.size;
        this.formInline.total = data.total;
      });
    },
    RightFetch() {
      var params = {};
      params.dept_id = this.formInline.dept_id;
      axios.post(urls.list, params).then(res => {
        const data = res.data.result;
        this.tableData = data.records;
        this.formInline.current = data.current;
        this.formInline.size = data.size;
        this.formInline.total = data.total;
      });
    },
    handleNodeClick(e) {
      // console.log(e);
       this.formInline.dept_id = e.objectId;
      this.RightFetch()
    }
  },
  mounted() {
    this.fetch();
  },
  data() {
    return {
      formInline: {
        realName: null,
        usrName: null,
        deptId: null,
        current: 1, // 当前页
        size: 10, // 每页条数
        total: 0, // 总条数
        orders: [], // 排序
        sorter: {}
      },
      defaultProps: {
          children: 'children',
          label: 'name'
      },
      LeftTableData:[],
      tableData: [],
      emptyText :"加载中..."
    };
  },
  components: {
    Add,
    Edit,
    Main,
    page,
    DepartTree
  }
};
</script>
<style scoped>
.depart-tree {
  position: absolute;
  background: #fff;
  width: 15%;
  left: 11px;
  height: 92%;
  padding-left: 15px;
  overflow-y: scroll;
}
.right {
  background: #fff;
  width: 85%;
  position: absolute;
  right: 6px;
  height: 92%;
  overflow: auto;
}
.user-list {
  position: absolute;
  background: #fff;
  padding: 20px;
  top: 50px;
  left: 270px;
  right: 0;
  bottom: 0px;
}
.el-tabs__item {
  width: 250px;
}
.middle {
  position: absolute;
  z-index: 88;
  top: 40px;
  left: 250px;
  width: 30px;
  height: 100%;
  background:#f0f2f5;
}
/deep/ .el-tree-node {
  width: 90%;
  text-align: left;
}
</style>